<template>
  <div class="home">
    <div class="home1">
      <img src="../assets/1.jpg" alt="" />
    </div>
    <div class="home2">
      <img src="../assets/3.png" alt="" />
      <p>
        广州Dovey朵维电子商务有限公司是一家以互联网技术为核心的电子商务运营商。公司采用先进的网络技术与严谨的管理制度，坚持以“让客户满意，为客户赢利”为服务宗旨，
      </p>
    </div>
    <div class="home_main">
      <div class="home_main_line">
        <div class="home_left_li"></div>
        <div class="home_center_li">
          <img src="../assets/4.png" alt="">
        </div>
        <div class="home_right_li"></div>
      </div>
    </div>
    <div class="home_list">
      <ul class="home_list_item">
       <li v-for="(item,index) in shoplist" :key="index">
        <img :src="item.pic" alt="">
         <p>{{ item.name }}</p>
         <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
      </li>
      </ul>

    </div>
   
  </div>
</template>

<script setup>

import {onMounted,ref} from "vue"
import axios from "axios"
const shoplist=ref([])
onMounted(()=>{
  axios({
    url:"https://api.it120.cc/dovey/shop/goods/list",
    method:"post",
    params:{
      recommendStatus: 1

    }
  }).then(res=>{
    console.log(res)
    shoplist.value=res.data.data
  })
 })
</script>

<style scoped lang="less">
.home {
  .home1 {
    img {
      width: 100%;
    }
  }
  .home2 {
    width: 400px;
    position: absolute;
    top: 20%;
    left: 10%;
    height: 300px;
    p {
      color: blue;
      font-size: 16px;
      line-height: 40px;
    }
    img {
      width: 250px;
    }
  }
  .home_main {
    width: 1200px;
    height: auto;
    margin: 25px auto;
  }
  .home_main_line{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .home_left_li{
    width: 320px;
    height: 2px;
    background: #3263ff;
    opacity: .2;
  }
  .home_center_li{

  }

  .home_right_li{
    width: 320px;
    height: 2px;
    background: #3263ff;
    opacity: .2;
  }
  .home_list{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    .home_list_item{
      width: 1200px;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      display: flex;
      padding: 0;
      margin: 0;
      li{
        width: 280px;
        height: 380px;
        list-style: none;
        margin-bottom: 20px;
        border: 2px solid #e6e6e6;
        img{
        width: 100%;
        height: 248px;
        }
        p{
          font-size: 14px;
          font-weight: bold;
          text-align: center;
        }
        .p1{
          text-align: center;
          color: red;
          font-size: 18px;
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}
</style>